<template>
  <div id="app">
   <h1 class="title">优惠推荐</h1>
   <div class="main-content">
	   <div class="discount-list">
		   <ul>
			   <li>
				   <img src="~@/assets/kqs.jpg">
				    <p>怡宝555ml</p> 
					<span>￥2.5</span>  
			   </li>
			<li>
			  <img src="~@/assets/kqs.jpg">
	A		  <p>怡宝555ml</p> 
			<span>￥2.5</span>  
			</li>
			<li>
			  <img src="~@/assets/kqs.jpg">
			  <p>怡宝555ml</p> 
			<span>￥2.5</span>  
			</li>
			<li>
			  <img src="~@/assets/kqs.jpg">
			  <p>怡宝555ml</p> 
			<span>￥2.5</span>  
			</li>
		   </ul>
	   </div>
	   <div class="goods-content">
		   <div class="goods-l">
			   <ul class="goods-title-list">
				   <li>
					   矿泉水
				   </li>
				   <li>
					   饮料
					</li>
				   <li>
					日用品   
				   </li>
				   <li>
					   零食
			      </li>
			   </ul>
		   </div>
		   <div class="goods-r">
			   <h3 class="goods-title">矿泉水</h3>
			   <ul class="goods-list" >
				   <li  v-for="(item,index) in goods" :key="index">
				   		 <div class="img"><img :src="item.imgsrc"></div> 
				   		  <div class="goods-samll-title">{{item.title}}</div>
				   		  <div class="add-goods">
				   		  <div class="minus" v-if="item.num>0" @click="minus(item.id)">-</div>	
				   		  <div class="add-goods-l">{{item.num}}瓶</div>
				   		  <div class="add-goods-r plus" @click="add(item.id)"><img src="~@/assets/add.jpg"> </div>  
				   		</div>
				     </li>
				 <!--  <li>
					   <img src="~@/assets/kqs.jpg">
					   <div class="goods-samll-title">怡宝 饮用纯净水 555ml/凭</div>
					   <div class="add-goods">
						  <div class="minus" @click="minus">-</div>	
						  <div class="add-goods-l">￥2.5瓶</div>
						   <div class="add-goods-r plus" @click="add"><img src="~@/assets/add.jpg"> </div>  
					   </div>
				   </li>
				   <li>
				   		<img src="~@/assets/kqs.jpg">
						 <div class="goods-samll-title">怡宝 饮用纯净水 555ml/凭</div>
						 <div class="add-goods">
						  <div class="minus" @click="minus">-</div>	 
						  <div class="add-goods-l" >￥2.5瓶</div>
						  <div class="add-goods-r" @click="add">
							  <div class="add" ><img src="~@/assets/add.jpg"></div>
						  </div> 
						  </div>
				   </li> -->
			   </ul>
		   </div>
	   </div>
   </div>
    <div class="footer">
		<div class="cart">
			<div class="car-l">起送￥{{totalprice}}</div>
			<div class="car-r" >共{{totalnum}}件</div> 
		</div>
	</div>
	<div class="poup">
		   <div class="p-goods-list-content">
			   <ul class="goods-list">
				  <li v-for="(item1,index) in items" :key="index">
				  	 <div class="img"><img :src="item1.imgsrc"></div> 
					 <div class="goods-text-box">
				  	  <div class="goods-samll-title">{{item1.title}}</div>
					  <div class="goods-price-box">
						 <div class="peice">{{item1.price}}</div> 
						 <div class="add-goods">
						  <div class="minus"  v-if="item1.num>0" @click="minus(item1.id)">-</div>	
						  <div class="add-goods-l">{{item1.num}}瓶</div>
						 <div class="add-goods-r plus" @click="add(item1.id)"><img src="~@/assets/add.jpg"> </div> 
						 </div>
					  </div>
      			     </div>
				  </li>
			   </ul>
		   </div>
	</div>
   </div>
  
</template>

<script>


export default {
  name: 'app',
  components: {
   
  },
  data(){
	  return{
		  totalnum:0,
		  totalprice:0,
		  items:[],
		  goods:[  
			  {
				 id:0,
				 price:12,
				 num:0,
				 imgsrc:'~@/assets/kqs.jpg',
				 title:'怡宝 饮用纯净水 555ml/凭',
			  },
			  {
			  	 id:1,
			  	 price:15,
			  	 num:0,
			  	 imgsrc:'~@/assets/kqs.jpg',
			  	 title:'怡宝 饮用纯净水 555ml/凭',
			  }
		  ],
	  }
	 
  },
   methods:{
 	   add(id){
		   //alert(id)
		   //var num=0;
		   var _this=this;
		  _this.totalnum++;
		   var arr;
		   var obj = {};
		   this.goods.forEach(function(item){
		            if(item.id==id){
						item.num++;	
					  _this.totalprice=_this.totalprice+item.price;	
					   _this.items.push(item);
					  // console.log(_this.items)
					 }		 	
		       })
			    _this.items=_this.items.reduce(function (item, next) {
			         obj[next.id] ? '' : obj[next.id] = true && item.push(next);
			         return item;
			       }, []);
			       console.log(_this.items)
 	   },
	   minus(id){
		   var _this=this;
		   _this.totalnum--;
		    this.goods.forEach(function(item){
		             if(item.id==id){
		    			item.num--;	
						_this.totalprice=_this.totalprice-item.price;
		    					
		    		}
		        })
	 if(_this.items.length!=0){			
		for(let i in _this.items) {
		        if(_this.items[i].id == id) {
				 if(_this.items[i].num==0){
					_this.items.splice(i,1)
		        }
				}
		    }		
	 }
	   }
	   
 }
  
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
 
}

body,div,ul,p ,span,li{
  list-style-type: none;
  padding: 0;
  margin: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
  
}
a {
  color: #42b983;
}
.title{
	text-align: left;
	font-size: 16px;
	padding-left: .4rem;
}
.discount-list p{
	font-size: 14px;
}
.discount-list ul{
	display: flex;
	
}
.discount-list ul li{
	text-align: center;
	width: 25%;
}
.discount-list li img{
	width: 100%;
}
.discount-list span{
	color:#F83434;
}
.goods-content{
	display: flex;
	margin-top:20px;
	
	overflow:hidden;
}
.goods-l{
	width: 25%;
    background-color: #d2d2d2;
	
}
.goods-r{
	width: 75%;
}
.goods-title-list li{
	line-height: 40px;
	font-size:14px
}
.goods-list{
	display: flex;
	margin-top: 10px;
}
.goods-list li{
	width: 50%;
	
}
.goods-list li img{
	width: 100%;
}
.add-goods-l{
	color:#F83434;
}
.goods-title{
	font-size: 16px;
	text-align: left;
    margin: 0 0 0 10px;
}
.goods-samll-title{
	margin: 5px 0;
   font-size: .14px;
}
.add-goods{
	display: flex;
	justify-content: space-between;
	font-size: 14px;
}
.footer{
	 position: absolute;
	  height: 50px;
	  width: 100%;
	 bottom: 40px;
}
.cart{
	display: flex;
	justify-content: space-between;
	background-color:#FFAE00;
	 width: 80%;
	color: #fff;
	margin: 0 auto;
	border-radius: 20px;
	padding: 10px 20px;
}
.minus{
	width: 20px;
	height: 20px;
	background-color: #FFAE00;
	text-align: center;
    border-radius: 10px;
	font-size: 20px;
	line-height: 16px;
}
.img{
	width: 100%;
}
.p-goods-list-content .goods-list{
	display: block;
}
.p-goods-list-content .goods-list li{
	display: flex;
	width: 100% !important;
}
.p-goods-list-content .goods-list .img{
	width: 25% !important;
}
.p-goods-list-content .goods-samll-title{
	text-align:left;
}
.poup{
	background-color: #FFFFFF;
	position: absolute;
	width: 97%;
	left: 0;
	bottom: 0;
}
.goods-price-box{
display: flex;
justify-content: space-between;
width: 90%;
margin-left: 2%;
}
.goods-text-box{
width: 75%;

}
</style>
